<template>
  <div>
    <el-card>
      <div class="header">
        <h3>管理员信息列表</h3>
        <el-form>
          <el-button type="primary"> 添加角色 </el-button>
        </el-form>
      </div>
      <el-table
        :data="
          admins.filter(
            (data) =>
              !search || data.nickName.toLowerCase().includes(search.toLowerCase())
          )
        "
        style="width: 100%"
      >
        <el-table-column label="用户id" prop="id"> </el-table-column>
        <el-table-column label="姓名" prop="nickName"> </el-table-column>
        <el-table-column label="登录名称" prop="username"></el-table-column>
        <el-table-column label="电话" prop="phone"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column align="right">
          <template slot="header">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"
            />
          </template>
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <Paging :PageData="tableDataPage"></Paging>
    </el-card>
  </div>
</template>

<script>
import Paging from "../components/Paging.vue";

export default {
  components: {
    Paging,
  },
  data() {
    return {
      tableDataPage: {
        pageSizes: [5, 10, 50, 100],
        pageSize: 5,
        currentPage: 1,
        total: 2,
      },
      admins: [
        {
          id: "1",
          username: "admin",
          nickName: "张三",
          phone: "123456",
          email: "123@qq.com",
          status: "1",
        },
      ],
      search: "",
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
}
</style>